<template>
    <div class="head-portrait">
      <Header title="我的头像" to='/personal/setting/edit'></Header>
      <div class="head-portrait-save" @click="change()">保存</div>
        <el-upload
            class="avatar-uploader"
            :action="`${baseUrl}/upload`"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                <div class="head-portrait-text">
                  点击图片可切换头像
                </div>
        </el-upload>
    </div>
</template>

<script>
import axios from 'axios'
import { getLocalStorage, setLocalStorage, removeLocalStorage } from '../../utils/localStorage'
import { garbageMixin } from '../../utils/mixin'
import Header from '../common/Header'
export default {
  mixins: [garbageMixin],
  components: {
    Header
  },
  data () {
    return {
      baseUrl: axios.defaults.baseURL,
      imageUrl: ''
    }
  },
  methods: {
    handleAvatarSuccess (res, file) {
      if (res.success) {
        this.$message.success('上传成功')
        console.log(res)
        this.imageUrl = URL.createObjectURL(file.raw)
        console.log(this.imageUrl)
      } else {
        this.$message.error('上传失败')
      }
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    change () {
      // console.log('2222', this.imageUrl)
      removeLocalStorage('userImg')
      this.setUserImg(this.imageUrl)
      setLocalStorage('userImg', this.imageUrl)
    }
  },
  mounted () {
    let userImg = getLocalStorage('userImg')
    this.imageUrl = userImg
    // console.log('1111', this.imageUrl)
  }
  // mounted () {
  //   let prefix = 'http://123.56.224.209:3000/mock/41/personal/login'
  //   axios.post(prefix, {
  //     usrname: '张三',
  //     password: 123
  //   })
  //     .then(function (response) {
  //       console.log(response)
  //     })
  //     .catch(function (error) {
  //       console.log(error)
  //     })
  // }
}
</script>

<style lang="scss" scoped>
@import "../../assets/styles/global";
.head-portrait {
    background: skyblue;
    position: relative;
    .head-portrait-save {
      position: absolute;
      top: 12px;
      right: 12px;
      font-size: 14px;
      &:active {
        color: white;
      }
    }
    .avatar-uploader {
      text-align: center;
      margin-top: 100px;
      padding-bottom: 100px;
        .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            &:hover {
                border-color: #409EFF;
            }
            .avatar {
                width: 178px;
                height: 178px;
                border: 1px solid white;
                border-radius: 50%;
                display: block;
            }
            .avatar-uploader-icon {
                font-size: 28px;
                color: #8c939d;
                width: 178px;
                height: 178px;
                border: 1px solid white;
                border-radius: 50%;
                line-height: 178px;
                text-align: center;
            }
            .head-portrait-text {
              font-size: 16px;
              color: white;
              margin-top: 16px;
            }
        }
    }
}
</style>
